<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接口管理与测试</title>
    <style>
        .container { display: flex; }
        .sidebar { width: 200px; background-color: #f0f0f0; padding: 20px; }
        .main { flex: 1; padding: 20px; }
        .interface-form { display: flex; align-items: center; margin-bottom: 10px; }
        .interface-form input, .interface-form select, .interface-form textarea { margin-right: 10px; }
        .response { margin-top: 20px; padding: 10px; border: 1px solid #ccc; white-space: pre-wrap; }
    </style>
</head>
<body>
<div class="container">
    <div class="sidebar">
        <ul>
            <li><a href="#" onclick="showInterfacePage()">接口管理</a></li>
            <li><a href="#" onclick="showTestPage()">个人中心</a></li>
        </ul>
    </div>
    <div class="main">
        <div id="interfacePage">
            <h2>接口管理</h2>
            <div id="interfaceList">
                <!-- 这里用来展示接口列表 -->
            </div>
            <div class="interface-form">
                <input type="text" id="interfaceName" placeholder="接口名称">
                <select id="requestType" onchange="showRequestBody(this)">
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
                    <option value="DELETE">DELETE</option>
                    <option value="PUT">PUT</option>
                </select>
                <input type="text" id="url" placeholder="请求URL">
                <select id="requestBodyType" style="display: none;">
                    <option value="application/json">JSON</option>
                    <option value="application/x-www-form-urlencoded">x-www-form-urlencoded</option>
                </select>
                <textarea id="requestBody" placeholder="请求体" style="display: none;"></textarea>
                <button onclick="addInterface()">保存</button>
            </div>
            <div class="response" id="response"></div>
        </div>
        <div id="testPage" style="display: none;">
            <h2>个人中心</h2>
            <div>

                <h2>个人信息</h2>
            </div>
            <div id="personalInfo" style="display: none;">
                <p>姓名：zhangsan</p>
                <p>微信：zhangsan123</p>
                <p>电话：13512345678</p>
                <p>QQ：123456789</p>
                <p>邮箱：zhangsan@example.com</p>
            </div>
            <button onclick="showPersonalInfo()">查看个人信息</button>
            <!-- 账户信息部分 -->
            <div>
                <h2>账户信息</h2>
            </div>
            <div id="accountInfo" style="display: none;">
                <p>账户：zhangsan123</p>
                <p>密码：********</p>
                <p>电话号码：13512345678</p>
                <p>验证码：1234</p>
            </div>
            <button onclick="showAccountInfo()">查看账户信息</button>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    function showInterfacePage() {
        document.getElementById("interfacePage").style.display = "block";
        document.getElementById("testPage").style.display = "none";
        fetchInterfaces();
    }

    function showTestPage() {
        document.getElementById("interfacePage").style.display = "none";
        document.getElementById("testPage").style.display = "block";
    }

    function showRequestBody(selectElement) {
        const requestBody = document.getElementById("requestBody");
        const requestBodyType = document.getElementById("requestBodyType");
        if (selectElement.value === "POST" || selectElement.value === "PUT") {
            requestBody.style.display = "block";
            requestBodyType.style.display = "block";
        } else {
            requestBody.style.display = "none";
            requestBodyType.style.display = "none"
        }
    }

    function addInterface() {
        const interfaceName = document.getElementById("interfaceName").value;
        const requestType = document.getElementById("requestType").value;
        const url = document.getElementById("url").value;
        const requestBody = document.getElementById("requestBody").value;
        const requestBodyType = document.getElementById("requestBodyType").value;

        axios.post('/api/tests', {
            name: interfaceName,
            endpoint: url,
            requestType: requestType,
            requestBody: requestBody,
            requestBodyType: requestBodyType
        }).then(response => {
            fetchInterfaces();
        }).catch(error => {
            console.log(error);
        });
    }

    function fetchInterfaces() {
        axios.get('/api/tests')
            .then(response => {
                const interfaces = response.data;
                const interfaceList = document.getElementById("interfaceList");
                interfaceList.innerHTML = "";
                interfaces.forEach((apiTest, index) => {
                    const div = document.createElement("div");
                    div.innerHTML = `
                        <input type="checkbox" id="interface${index}">
                        <label for="interface${index}">${apiTest.name} - ${apiTest.requestType} - ${apiTest.endpoint}</label>
                        <button onclick="executeInterface(${apiTest.id})">执行</button>
                        <button onclick="deleteInterface(${apiTest.id})">删除</button>
                    `;
                    interfaceList.appendChild(div);
                });
            }).catch(error => {
            console.log(error);
        });
    }

    function executeInterface(id) {
        axios.get(`/api/tests/${id}`)
            .then(response => {
                const apiTest = response.data;
                let axiosConfig = {
                    method: apiTest.requestType.toLowerCase(),
                    url: apiTest.endpoint,
                    headers: {
                        'Content-Type': apiTest.requestBodyType || 'application/json'
                    }
                };

                if (apiTest.requestType === 'POST' || apiTest.requestType === 'PUT') {
                    if(apiTest.requestBodyType === 'application/x-www-form-urlencoded'){
                        axiosConfig.data = new URLSearchParams(JSON.parse(apiTest.requestBody)).toString();
                    }else{
                        axiosConfig.data = JSON.parse(apiTest.requestBody);
                    }
                }

                // 发送实际请求到接口地址
                axios(axiosConfig)
                    .then(response => {
                        const result = `
                            接口 ${apiTest.name} 请求成功
                            响应状态: ${response.status}
                            响应数据: ${JSON.stringify(response.data, null, 2)}
                        `;
                        document.getElementById("response").innerText = result;
                    })
                    .catch(error => {
                        const result = `
                            接口 ${apiTest.name} 请求失败
                            错误: ${error.message}
                        `;
                        document.getElementById("response").innerText = result;
                    });
            })
            .catch(error => {
                console.log(error);
                document.getElementById("response").innerText = `
                    获取接口详情失败: ${error.message}
                `;
            });
    }
    function deleteInterface(id) {
        axios.delete(`/api/tests/${id}`)
            .then(response => {
                fetchInterfaces();
            }).catch(error => {
            console.log(error);
        });
    }
    function showPersonalInfo() {
        var personalInfo = document.getElementById("personalInfo");
        personalInfo.style.display = "block";
    }
    function showAccountInfo() {
        var accountInfo = document.getElementById("accountInfo");
        accountInfo.style.display = "block";
    }
    // 初始加载接口列表
    fetchInterfaces();
</script>
</body>
</html>